<template>
	<view class="app-container">
		<view class="head">
			<u-avatar bg-color="#fff" mode="aspectFit" :src="userInfo.avatar" size="60"></u-avatar>
			<view class="level">
				<text>昵称：{{ userInfo.nickName }}</text>
				<text>等级：v{{ userInfo.vpnLevel }}</text>
			</view>
		</view>
		<view>
			<button :loading="loading" class="start-btn" @click="handleStart">{{start_btn}}</button>
		</view>
		<view class="income">
			<view class="left">
				<view class='content content-l'>
					<view class="small-box"></view>
					<!-- <canvas style="width: 120px;height: 120px;" canvas-id="runCanvas" class='canvasII'></canvas> -->
					<text class="label-txt">{{formatNum(earningsShow.todayEarnings)}}</text>
				</view>
				<text class="label-t">今日挂机丰收</text>
			</view>
			<view class="right">
				<view class='content'>
					<view class="small-box"></view>
					<canvas style="width: 120px;height: 120px;" canvas-id="runCanvas" class='canvasII'></canvas>
					<!-- <text class="label-txt">{{formatNum(earningsShow.minute)}}</text> -->
					<text class="label-txt">{{formatM(minute)}}</text>
				</view>
				<text class="label-t">今日挂机时长</text>
			</view>
		</view>
		<view class="introduce">
			<view class="des_bg1"></view>
			<view class="des">
				<!-- <view class="label-title">游戏介绍</view> -->
				<text v-html="introduce">{{introduce}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		EarningsShow,
		getHowToPlay,
		getAds,
		Start,
		startStatus
	} from "@/api/home.js"
	import {
		Update
	} from "@/api/user.js"
	import plusReady from "@/utils/comm.js"
	export default {
		data() {
			return {
				userInfo: {},
				earningsShow: {},
				introduce: "",
				loading: false,
				start_btn: "开始挂机",
				num: 0,
				start_status: "",
				timer: null,
				minute: 0,
				isPopup: false,
				adTimer: null,
			}
		},
		onShow() {
			this.getInfo()
			this.getEarningsShow()
			this.fecthHowToPlay()
			this.getStartStatus()
			// this.start()
			// this.timekeeping()
		},
		methods: {
			closePopup() {
				this.show = false;
			},
			getInfo() {
				this.$store.dispatch('user/getInfo').then(res => {
					let {
						avatar,
						nickName,
						vpnLevel
					} = res;
					this.userInfo = {
						avatar,
						nickName,
						vpnLevel
					}
				});
			},
			// 挂机时长
			getEarningsShow() {
				EarningsShow().then(res => {
					// console.log(12, res);
					this.earningsShow = res;
					this.minute = res.minute
				})
			},
			// 玩法介绍
			fecthHowToPlay() {
				getHowToPlay({
					type: '1'
				}).then(res => {
					this.introduce = res.text
				})
			},
			formatNum(num) {
				return Number(num).toFixed(2).toLocaleString()
			},
			handleStart() {
				this.getStartStatus()
				// console.log(11);
				if (this.start_status != "stopping") {
					uni.showToast({
						title: "已处于挂机中"
					})
					return
				}
				this.loading = true
				// console.log(11234);
				Start().then(res => {
					// console.log(res);
					this.start()
					this.timekeeping()
					this.loading = false;
					this.start_btn = "挂机中……"
					uni.showToast({
						title: res.msg,
						icon: "success"
					})
				}).catch(res => {
					// console.log(res);
					this.loading = false
				})
			},
			cartoon(num) {
				//新建一个画布
				const ctx = uni.createCanvasContext('runCanvas')

				var yuanxin1 = 60 //圆心
				var yuanxin2 = 60
				var r = 54 //半径

				var num_c = num * (2 / 10800)
				ctx.beginPath()
				ctx.arc(yuanxin1, yuanxin2, r, 0, num_c * Math.PI)
				ctx.setStrokeStyle('#3b3bd5')
				ctx.setLineWidth(11)
				ctx.stroke()

				ctx.draw()
			},
			start() {
				//开始动画
				var timer = setInterval(() => {
					this.num += 1;
					this.cartoon(this.num)
					if (this.num > 10800) {
						clearInterval(timer)
					}
				}, 1000)
				this.timer = timer
			},
			timekeeping() {
				var timer = setInterval(() => {
					this.minute += 1;
					if (this.minute > 10800) {
						this.minute = 180
						clearInterval(timer)
					}
				}, 1000)
			},
			formatM(s) {
				var h;
				h = Math.floor(s / 60);
				s = s % 60;
				h += '';
				s += '';
				//如果只有一位数，前面增加一个0
				h = (h.length == 1) ? '0' + h : h;
				s = (s.length == 1) ? '0' + s : s;
				return h + ':' + s;
			},
			getStartStatus() {
				startStatus().then(res => {
					this.start_status = res;
					// console.log(res);
					if (res != "stopping") {
						this.start();
						this.timekeeping()
						this.start_btn = "挂机中……"
					}
				})
			},	
			// 获取当前版本号
			plusReady() {
				var that = this;
				// 获取本地应用资源版本号  
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					// console.log(inf, 111111111)
					that.AndroidCheckUpdate(inf.version)
					uni.setStorageSync('version', inf.version)
				});
			
			},
			// 自动更新
			AndroidCheckUpdate(ver) {
				var that = this;
				Update(ver).then(res => {
					// console.log(1232, res);
					if (res.version > ver) {
						uni.setStorageSync('isNew', true)
						uni.showModal({
							title: '',
							content: '检测到有新版本可升级，是否更新',
							confirmText: '更新',
							confirmColor: '#EE8F57',
							success: function(res2) {
								if (res2.confirm) {
									uni.setStorageSync('version', res.version)
									if (uni.getSystemInfoSync().platform == 'android') {
										that.doUpData(res.androidUrl)
									} else if (uni.getSystemInfoSync().platform == 'ios') {
										that.doUpData(res.iosUrl)
									}
								}
							}
						});
					} else {
						uni.setStorageSync('isNew', false)
						// console.log("已是最新版本");
					}
				})
			},
			doUpData(urls) {
				uni.showLoading({
					title: '正在更新中……'
				})
				uni.downloadFile({ //执行下载
					url: urls,
					success: downloadResult => { //下载成功
						if (downloadResult.statusCode === 200) {
							uni.showModal({
								title: '',
								content: '更新成功，重启使用新版本',
								confirmText: '重启',
								confirmColor: '#EE8F57',
								success: function(res) {
									if (res.confirm) {
										plus.runtime.install( //安装
											downloadResult.tempFilePath, {
												force: true
											},
											function() {
												utils.showToast('更新成功，重启中');
												plus.runtime.restart();
											},
											function(e) {
												utils.showToast('更新失败');
											}
										);
									}
								}
							});
						} else {
							uni.showLoading({
								title: '更新失败，请联系管理员'
							})
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			
		},
		onLoad(options) {
			this.plusReady();
			// this.isPopup = options.isPopup
			// if(!this.isPopup){
			// 	if(this.adTimer){
			// 		clearTimeout(this.adTimer)
			// 	}
			// 	this.adTimer = setTimeout(() => {
			// 		uni.reLaunch({
			// 			url:"/pages/home/popup"
			// 		})
			// 	},2000)
			// }
		},
		onHide() {
			// this.start()
			if (this.timer) {
				// console.log("timer");
				clearInterval(this.timer)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #031335;
		// background-image: linear-gradient(to bottom, #111424, #90939b);
	}

	.app-container {
		padding: 30px 20px;
	}

	.head {
		display: flex;
		align-items: center;

		.avatar {
			background-color: #fff;
			outline: 1px solid red;
		}

		.level {
			margin-left: 15px;
			line-height: 26px;
			display: flex;
			flex-direction: column;
			color: #fff;
		}
	}

	.start-btn {
		margin-top: 20px;
		border: none;
		color: #fff;
		letter-spacing: 2px;
		background: linear-gradient(to right, #38dde5, #1891d6);
	}

	.income {
		margin-top: 20px;
		display: flex;

		.content.content-l {
			// background: #3b3bd5;
			background: linear-gradient(45deg, #38dde5, #1891d6);
			// outline: 1px solid red;
		}

		.content {
			width: 120px;
			height: 120px;
			border-radius: 100px;
			background: #90939b88;
			position: relative;
			// outline: 1px solid red;

			.small-box {
				position: absolute;
				top: 25rpx;
				left: 25rpx;
				width: 95px;
				height: 95px;
				border-radius: 100px;
				background: #041235;
				// outline: 1px solid #fff;
			}

			.label-txt {
				font-size: 20px;
				font-weight: bold;
				position: absolute;
				top: 40%;
				left: 0;
				width: 100%;
				text-align: center;
				// color: #4777dc;
				// outline: 1px solid red;
			}
		}

		.label-t {
			margin-top: 10px;
			font-size: 18px;
		}

		.left,
		.right {
			width: 50%;
			// height: 160px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: 400;
			color: #fff;
			// outline: 1px solid red;
		}
	}

	.introduce,
		{
		margin-top: 20px;
		color: #fff;
		// height: 550px;
		// padding: 0 20px;
		position: relative;
		background: url("@/static/image/des_bg2.png") no-repeat;
		background-size: 100% auto;

		// outline: 1px solid red;
		.des_bg1 {
			position: absolute;
			top: 24px;
			left: 1%;
			width: 98%;
			height: 90%;
			border: 2px solid #227ace;
			border-top: none;
			border-bottom: none;
		}

		.des {
			padding: 24px 20px;
			background: url("@/static/image/des_bg1.png") no-repeat;
			background-size: 102% auto;
			background-position: bottom;
		}

		.label-title {
			margin-bottom: 15px;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
		}

		text {
			line-height: 24px;
		}
	}

	/* 关闭 */
	.pop-close {
		position: fixed;
		top: 30px;
		right: 20px;
		width: 80px;
		height: 28px;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		color: #fff;
		border-radius: 100px;

		// display: flex;
		// align-items: center;
		// justify-content: center;
		.top-close {
			line-height: 28px;
			text-align: left;
			padding-left: 8px;
		}

		.close-icon {
			position: absolute;
			top: 0;
			right: 10px;
			width: 26px;
			height: 26px;
		}
	}

	.popup {
		/deep/.u-popup__content {
			width: 100%;
			background-color: transparent;
		}
	}

	.popup-con {
		.close {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 5px;
		}

		.close-box {
			position: fixed;
			top: 30px;
			right: 20px;
			width: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 5px;
			border-radius: 100px;
			padding: 0 10px;
			color: #fff;
			border: 1px solid #fff;

			.time {
				margin-right: 5px;
			}
		}

		.ad {
			text-align: center;
			width: 100%;

			// height: 100%;
			// outline: 1px solid red;
			.video-con {
				// margin-top: 150px;
				position: relative;
				z-index: 9999;
				outline: 1px solid red;
			}

			#myVideo {
				width: 750rpx;
				// height: 100vh;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
